<template>
    <div class="newslistBox">
        <!-- <h1>这是新闻列表</h1> -->
        <ul class="newslist"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        style="max-height:100%;overflow-y:auto">
            <li v-for="item in list" :key="item.id">
                <router-link :to="'/home/newsinfo/'+ item.id">
                    <p class="news_title">{{item.title}}</p>
                    <p class="news_count">
                        <span class="author">作者：{{item.author}}</span>
                        <span class="add-time">日期：{{item.add_time | dateFormat}}</span>
                        <span class="click_count">阅读：{{item.click_count}}</span>
                    </p>
                </router-link>
            </li>
            <li class="spinner">
                <mt-spinner type="snake" v-show="!loading"></mt-spinner>
                <p  v-show="loading">加载完毕~</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:"newslist",
    data(){
        return{
            loading:false,  //默认为false，允许发送请求
            list:[],        //新闻数组
            pageindex:1,     //代表查询的那一页，默认1
            pagesize:10,    //代表查询的多少个记录，默认10
        }
    },
    created(){
        this.loadMore()
    },
    methods:{
        //请求参数：pageindex => 查询页码
        //pagesize => 每页查询记录的个数
        loadMore(){
            this.loading = true; //当发送一次请求未完成时，禁止响应新请求
            this.$http.get('http://www.barteam.cn:8086/news/newslist',{
                params:{
                    pageindex:this.pageindex,
                    pagesize:this.pagesize
                }
            }).then((res) => {
                this.loading = false;
                this.pageindex++;   //页码自增
                res.data.Data.forEach(item => {
                    return item.add_time = new Date();
                });
                if(res.data.Data.length < this.pagesize){
                    this.loading = true; //加载完最后一页，停止加载
                }
                this.list =this.list.concat(res.data.Data);
                
            })
        }
    }
}
</script>

<style lang="less">
.newslistBox{
    .newslist{
        list-style: none;
        padding: 0 16px;
        padding-bottom:40px;

        >li{
            border-bottom: 1px solid rgb(143, 138, 138);
            margin-bottom: 10px;
        }
        .news_title{
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .news_count{
            display: flex;
            justify-content: space-around;
        }
        .spinner{
            position: relative;
            left:45%;
            border: none;
        }
    }
}
</style>